<template>
  <view class="empty" :class="`empty--${size}`">
    <!-- 图标或图片 -->
    <view class="empty__image">
      <template v-if="image">
        <image 
          :src="image" 
          class="empty__custom-image"
          mode="aspectFit"
        />
      </template>
      <template v-else>
        <view class="empty__icon-wrapper">
          <u-icon 
            :name="iconName" 
            :size="iconSize" 
            :color="iconColor"
            class="empty__icon"
          ></u-icon>
        </view>
      </template>
    </view>
    
    <!-- 标题 -->
    <view v-if="title" class="empty__title">
      <text class="empty__title-text">{{ title }}</text>
    </view>
    
    <!-- 描述 -->
    <view v-if="description" class="empty__description">
      <text class="empty__description-text">{{ description }}</text>
    </view>
    
    <!-- 操作按钮 -->
    <view v-if="showAction" class="empty__action">
      <slot name="action">
        <Button
          :type="actionType"
          :size="actionSize"
          :loading="loading"
          @click="handleAction"
        >
          {{ actionText || $t('common.retry') }}
        </Button>
      </slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Button from './Button.vue'

type EmptyType = 'default' | 'noData' | 'noNetwork' | 'noSearch' | 'error' | 'maintenance' | 'noPermission'

interface Props {
  // 空状态类型
  type?: EmptyType
  // 尺寸
  size?: 'sm' | 'md' | 'lg'
  // 自定义图片
  image?: string
  // 自定义图标
  icon?: string
  // 标题
  title?: string
  // 描述
  description?: string
  // 是否显示操作按钮
  showAction?: boolean
  // 操作按钮文本
  actionText?: string
  // 操作按钮类型
  actionType?: 'primary' | 'secondary' | 'outline'
  // 操作按钮尺寸
  actionSize?: 'sm' | 'md' | 'lg'
  // 是否加载中
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  type: 'default',
  size: 'md',
  showAction: false,
  actionType: 'primary',
  actionSize: 'md'
})

interface Emits {
  action: []
}

const emit = defineEmits<Emits>()

// 预设配置
const presetConfig = {
  default: {
    icon: 'inbox',
    title: '暂无数据',
    description: '当前没有任何内容'
  },
  noData: {
    icon: 'file-text',
    title: '暂无数据',
    description: '暂时没有相关数据'
  },
  noNetwork: {
    icon: 'wifi-off',
    title: '网络连接失败',
    description: '请检查网络连接后重试'
  },
  noSearch: {
    icon: 'search',
    title: '无搜索结果',
    description: '试试其他关键词吧'
  },
  error: {
    icon: 'alert-circle',
    title: '出错了',
    description: '页面加载失败，请稍后重试'
  },
  maintenance: {
    icon: 'tool',
    title: '系统维护中',
    description: '系统正在维护，请稍后访问'
  },
  noPermission: {
    icon: 'lock',
    title: '暂无权限',
    description: '您没有访问此内容的权限'
  }
}

// 计算属性
const config = computed(() => presetConfig[props.type])

const iconName = computed(() => {
  return props.icon || config.value.icon
})

const iconSize = computed(() => {
  const sizeMap = {
    sm: '80rpx',
    md: '120rpx',
    lg: '160rpx'
  }
  return sizeMap[props.size]
})

const iconColor = computed(() => {
  return 'var(--text-color-disabled, #c0c4cc)'
})

const currentTitle = computed(() => {
  return props.title || config.value.title
})

const currentDescription = computed(() => {
  return props.description || config.value.description
})

// 事件处理
const handleAction = () => {
  emit('action')
}
</script>

<style lang="scss" scoped>
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  text-align: center;
  
  &--sm {
    padding: 60rpx 32rpx;
    
    .empty__title-text {
      font-size: 28rpx;
    }
    
    .empty__description-text {
      font-size: 24rpx;
    }
  }
  
  &--md {
    padding: 80rpx 40rpx;
    
    .empty__title-text {
      font-size: 32rpx;
    }
    
    .empty__description-text {
      font-size: 26rpx;
    }
  }
  
  &--lg {
    padding: 100rpx 48rpx;
    
    .empty__title-text {
      font-size: 36rpx;
    }
    
    .empty__description-text {
      font-size: 28rpx;
    }
  }
}

.empty__image {
  margin-bottom: 32rpx;
}

.empty__custom-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
}

.empty__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160rpx;
  height: 160rpx;
  background: var(--bg-color-light, #f8f9fa);
  border-radius: 50%;
  margin: 0 auto;
}

.empty__icon {
  opacity: 0.6;
}

.empty__title {
  margin-bottom: 16rpx;
}

.empty__title-text {
  color: var(--text-color, #333333);
  font-weight: 600;
  line-height: 1.4;
}

.empty__description {
  margin-bottom: 40rpx;
  max-width: 400rpx;
}

.empty__description-text {
  color: var(--text-color-secondary, #666666);
  line-height: 1.5;
}

.empty__action {
  :deep(.button) {
    min-width: 200rpx;
  }
}

// 响应式设计
@media (max-width: 750rpx) {
  .empty {
    &--sm {
      padding: 40rpx 24rpx;
    }
    
    &--md {
      padding: 60rpx 32rpx;
    }
    
    &--lg {
      padding: 80rpx 40rpx;
    }
  }
  
  .empty__custom-image {
    width: 160rpx;
    height: 160rpx;
  }
  
  .empty__icon-wrapper {
    width: 120rpx;
    height: 120rpx;
  }
  
  .empty__description {
    max-width: 300rpx;
  }
  
  .empty__action {
    :deep(.button) {
      min-width: 160rpx;
    }
  }
}

// 暗色主题适配
[data-theme='dark'] {
  .empty {
    --text-color: #ffffff;
    --text-color-secondary: #8e8e93;
    --text-color-disabled: #48484a;
    --bg-color-light: #2c2c2e;
  }
}
</style>